import React, {useState, useEffect, useContext} from 'react';
import axios from "axios";
import './css/film.css'

const globalContext = React.createContext();

function Film(props) {
    const value = useContext(globalContext);

    return <div>
        <div className="film">
            <img onClick={() => value.changeContent(props.synopsis)}
                 src={props.poster}
                 alt={props.name}/>
            <span>{props.name}</span>
        </div>
    </div>
}

export default function App() {
    const [list, setList] = useState([]);
    const [content, setContent] = useState("");

    useEffect(() => {
        axios.get("/test.json").then(res => {
            setList(res.data.data.films);
        })
    }, [])

    return <globalContext.Provider value={{
        content: content,
        changeContent: synopsis => setContent(synopsis),
    }}>
        <div>
            {
                list.map(item =>
                    <Film key={item.filmId}
                          {...item}>
                    </Film>)
            }
            <FilmDetail></FilmDetail>
        </div>
    </globalContext.Provider>
}

function FilmDetail() {
    const value = useContext(globalContext);

    return <div className="filmDetail">
        {value.content}
    </div>
}